<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>轮播图列表</title>
    <link rel="stylesheet" href="__CSS__/supplies/bootstrap.min.css" />
    <!--<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/css/bootstrap-select.min.css">-->
    <link rel="stylesheet" href="__CSS__/supplies/common.css" />
    <link rel="stylesheet" href="__CSS__/supplies/fileinput/fileinput.css" />
    <link rel="stylesheet" href="__JS__/supplies/ztree/css/zTreeStyle/zTreeStyle.css" type="text/css">
    <link rel="stylesheet" href="__JS__/supplies/bootstrap-table/bootstrap-table.min.css">
    <link rel="stylesheet" href="__ASSETS__/css/font-awesome.min.css" />
    <link rel="stylesheet" href="__ASSETS__/css/cyrillic.css" />
    <link rel="stylesheet" href="__ASSETS__/css/ace-rtl.min.css" />
    <link rel="stylesheet" href="__ASSETS__/css/ace-skins.min.css" />
    <style>
        body{
            height: 100% ;
            overflow: hidden;
            background: white;
        }
        .table-responsive{
            height:calc(100% - 50px)
        }
        .bootstrap-table{
            height:100%
        }
        .fixed-table-container{
            height:calc(100% - 65px) !important;
        }
        .form-title {
            height: 40px;
            min-width: 100px;
            text-align: right;
        }
        .button {
            width: 100px;
            margin: 13px 0 0 18px;
        }
        #user_table tr td {
            vertical-align: inherit;
        !important;
        }
        img{
            width: 75px;
            height: 75px;
            max-width:75px;_width:expression(this.width > 75 ? "37.5px" : this.width);
        }
        .delete_a{
            cursor: pointer;
        }
        .save_btn{
            background: #62a8d1;
            border: 1px solid #62a8d1;
        }
        .save_btn:hover{
            background: #62a8d1;
            border: 1px solid #62a8d1;
        }
    </style>
</head>
<body>
<!--搜索-->
<div style="height: 100%;">
    <div class="button"  style="padding-bottom: 5px;margin-left: 2px;">
        <button class="btn btn-default form-group save_btn" onclick="addImage()">
            <i class="icon-plus align-top bigger-125"></i>
            新增
        </button>
        <!--<button type="button" class="btn btn-primary" onclick="addImage()">添加图片</button>-->
    </div>
    <div class="table-responsive" style="background:white;margin-top: 0px;">
        <table class="table" id="user_table"></table>
    </div>
</div>

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true" data-backdrop="static">
    <div class="modal-dialog"  >
        <div class="modal-content" style="width: 850px;height: 600px;">
            <div class="modal-header" style="width:100%;height: 50px;">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                <h4 class="modal-title" id="exampleModalLabel">添加轮播图:</h4>
            </div>
            <div class="modal-body" style="overflow: auto; width: 100%;height: 485px;">
                <form class="form-horizontal" role="form">
                    <table>
                        <td class="form-title">
                            前台展示：
                        </td>
                        <td class="form-value">
                            <input type="radio" name="status" value="1" checked>显示
                            <input type="radio" name="status" value="2" >隐藏
                        </td>
                        <tr>
                            <td class="form-title">
                                上传图片：
                            </td>
                            <td class="col-md-10">
                                <input id="file-Portrait" type="file" name="image[]" multiple class="file-loading">
                            </td>
                        </tr>
                        <tr>
                            <td class="form-title"></td>
                            <td class="form-value">
                                <div style="color: red">*图片建议尺寸为1200*400</div>
                            </td>
                        </tr>
                    </table>
                </form>
            </div>
            <div class="modal-footer" style="width:100%;height: 65px;">
                <button type="button" class="btn btn-default" data-dismiss="modal" onclick="uploadImg()">保存</button>&nbsp;
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>
<script rel="script" src="__JS__/supplies/jquery.min.js"></script>
<script rel="script" src="__JS__/supplies/bootstrap.min.js"></script>
<script rel="script" src="__JS__/supplies/bootstrap-table/bootstrap-table.min.js"></script>
<script rel="script" src="__JS__/supplies/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>
<script rel="script" src="__JS__/supplies/vue.min.js"></script>
<script rel="script" src="__JS__/supplies/vue-validator.min.js"></script>
<script rel="script" src="__JS__/supplies/common.js"></script>
<script rel="script" src="__JS__/supplies/ztree/jquery.ztree.all.min.js"></script>
<script rel="script" src="__JS__/supplies/layer/layer.js"></script>
<script rel="script" src="__JS__/supplies/fileinput/fileinput.js"></script>
<script rel="script" src="__JS__/supplies/fileinput/locales/zh.js"></script>
<script rel="script" src="__JS__/supplies/layer/layer.js"></script>
<script>
    var searchData = {};
    var status;
    var id='';
    $(document).ready(function () {
        initFileInput("{:url('admin/Sundry/uploadImage')}");
    });

    var tableheight = document.documentElement.clientHeight - 96;
    // 用户管理
    $('#user_table').bootstrapTableEx({
        height: tableheight,
        url: '{:url("admin/Sundry/getCarouselList")}',
        columns: [
            {
                checkbox: true
            }, {
                field: 'id',
                align: 'center',
                title: '序号',
                width:60
            }, {
                field: 'image',
                align: 'center',
                title: '轮播图',
                formatter: function (val, row, index) {
                    var str = '';
                    for (var i=0;i<val.length ; i++)
                    {
                        str += "<img style='margin-right: 10px;' src='"+oss_url + val[i]+"'>";
                    }
                    return str;
                }
            }, {
                field: 'status',
                align: 'center',
                title: '状态',
                width:100,
                formatter:function(val,row,index){
                    if(val == "显示"){
                        return "<span style='color: green'>显示</span>";
                    }else{
                        return "<span style='color: red'>隐藏</span>";
                    }
                }
            },{
                field: 'is_shelves',
                title: '操作',
                align: 'center',
                width: 100,
                formatter: operateFormatter
            }
        ],
        queryParams: function (params) {
            var param = {
                search: searchData,
                pageSize: params.pageSize,
                pageNumber: params.pageNumber
            };
            return param;
        },
        responseHandler: function (res) {
            if (res.data) {
                return {
                    rows: res.data,
                    total: res.count
                };
            }
        }
    });
    // 详情按钮
    function operateFormatter(val, row, index) {

        var divStr = "<div class='form-inline'>"
        var detailStr = "<a href='javascript:void(0)' class='detail_a' onclick='detailsImage(1," + row.id + ")'>查看</a>&nbsp;&nbsp;" +
            "<a href='javascript:void(0)' class='detail_a' onclick='delCarousel(1," + row.id + ")'>删除</a>";


        divStr += detailStr;
        divStr += "</div>";
        return divStr;
    }

    function delCarousel(index , id) {
        layer.config({
            skin:"my_skin"
        })
        layer.confirm('您确定删除吗？', {
            btn: ['确定','取消'] //按钮
        }, function(){
            $.ajax({
                url : '{:url("admin/Sundry/delCarousel")}',
                type : "POST",
                data:{'id':id},
                success : function (data) {
                    layer.confirm(data.msg, {
                        time: 20000, //20s后自动关闭
                        btn: ['关闭']
                    },function () {
                        location.reload();
                    });
                }
            })
        });
    }

    function uploadImg() {
        status = $('input[name=status]:checked').val();
        if(id)
        {
//            initFileInput('{:url("admin/Sundry/uploadImage")}');
            $('#file-Portrait').fileinput('upload');
        }
        else
        {
            $('#file-Portrait').fileinput('upload');
        }
    }
    function initFileInput(uploadUrl,img) {

            $("#file-Portrait").fileinput({
            language: 'zh', //设置语言
            uploadUrl: uploadUrl, //上传的地址
            showPreview: true,              //展前预览
            showUpload: false,              //不显示上传按钮
            showCaption: false,             //不显示文字表述
            showRemove :true, //显示移除按钮
            uploadAsync:false,                             //采用同步上传
            removeFromPreviewOnError:true,                 //当文件不符合规则，就不显示预览
            maxFileCount: 5,
//            maxFileSize: 1024*10,                          //单位为kb，如果为0表示不限制文件大小
            allowedFileExtensions: ["jpg", "jpeg", "gif", "png"],
            initialPreview:img,
            layoutTemplates:{
                actionDelete:'',
                actionUpload:'',
            },
            uploadExtraData:function (previewId, index) {
//注意这里，传参是json格式,后台直接使用对象属性接收，比如employeeCode，我在RatingQuery 里面直接定义了employeeCode属性，然后最重要的也是
//最容易忽略的，传递多个参数时，不要忘记里面大括号{}后面的分号，这里可以直接return {a:b}; 或者{a:b}都可以，但必须要有大括号包裹
                var data = {
                    status:status,
                    id:id,
                };
                return data;
            },
        }).on('filebatchuploadsuccess', function(event, data, previewId, index) {
            var result = data.response;
            if(result.status == 200){
                layer.msg("保存成功");
                $("#user_table").bootstrapTable('refresh');

            }
            else
            {
                layer.msg("保存失败");
            }
        });
    }

    // 查看
    function detailsImage(index, pid) {
        $('#file-Portrait').fileinput('refresh',{
            initialPreview:'',
        });
        id = pid;
        $.ajax({
            url:"{:url('admin/Sundry/getCarouselInfo')}",
            type:'post',
            dataType:'json',
            data:{'id':pid},//form表单的值
            success:function(data){
                if(data.status == 200)
                {
                    if(data.data)
                    {
                        var img = [];
                        var str = '';
                        for (var i=0; i<data.data.image.length ; i++)
                        {
                            str = "<img src='"+oss_url+data.data.image[i]+"' style='width:auto;height:160px;'>";
                            img.push(str);
                        }
                        $('#file-Portrait').fileinput('refresh',{
                            initialPreview:img,
                        });
                        $('input[name=status]').each(function () {
                            if($(this).val() == data.data.status)
                            {
                                $(this).attr('checked','checked');
                            }
                            else
                            {
                                $(this).removeAttr('checked');
                            }
                        })
                    }
                }
                else
                {
                    layer.msg('获取详情失败');
                }
            },
        });
        $('#exampleModal').modal({
            keyboard: true
        });
    }

    //新增
    function addImage() {
        status = '';
        id='';
        $("#file-Portrait").fileinput('refresh',{
            initialPreview: ''
        });
        $('#exampleModal').modal({
            keyboard: true
        });
    }
</script>
</body>
</html>